<template>
    <div class="btn_search">
        <div class="ui icon input" :class="{ loading: inSearch }" style="float: right">
            <input type="text" class="input_search" v-model.trim="searchContent" @focus="showText()" @blur="hideText()"
                   placeholder="搜索...">
            <i class="circular search link icon" style="color: white"></i>
        </div>
        <div class="panel_search_result" v-show="searchContent">
            <template v-for="(list,index) in searchList">
                <div @click="toArticle(list.id)" style="margin: 0.6vw" :key="index">
                    <a><strong> {{list.title}}</strong></a>
                    <p>{{list.introduction|capitalize(searchContent)}}</p>
                    <hr>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Search",
        data() {
            return {
                searchContent: '',
                searchList: '',
                inSearch: false,
            }
        },
        watch: {
            searchContent: function () {
                this.inSearch = true;
                this.searchList = '';
                if (this.searchContent == null || this.searchContent == '') {
                    console.log('查找内容为空');
                    this.searchList = '';
                    this.inSearch = false;
                    return false;
                }
                this.req({
                    method: 'post',
                    url: 'search',
                    data: {
                        content: this.searchContent
                    }
                })
                    .then(res => {
                        this.searchList = res.data;
                        console.log(this.searchList)
                        this.inSearch = false;
                    })
                    .catch(error => {
                        console.log('searchContent() error' + error);
                    });

            },
        },
        methods: {
            toArticle($id) {
                if ($id == this.$route.params) return false;
                this.$router.push({name: 'article', params: {'articleId': $id}});
                this.searchList = '';
            },
            hideText() {
                $('.panel_search_result').fadeOut();
            },
            showText() {
                if (this.searchContent)
                    $('.panel_search_result').fadeIn();
            }
        },

        filters: {
            capitalize: function (intro, search) {
                let index = intro.indexOf(search);
                if (index < 0) {
                    return intro.slice(0, 44) + '...';
                }
                let pre = intro.slice(index - 20, index);
                let aft = intro.slice(index + 1, index + 20);
                let final = pre + '【' + search + '】' + aft + '...';
                return final;

            }
        }
    }
</script>

<style scoped>
    .btn_search {
        cursor: pointer;
        position: absolute;
        top: 25px;
        right: 3vw;
        border-radius: 2px;
        padding: 3px;
        width: 270px;
    }

    .input_search {

        border-radius: 145px !important;
        background: rgba(0, 0, 0, 0.4) !important;
        color: white !important;
    }

    .input_search:focus {
        border: rgba(0, 0, 0, 0.3) !important;
    }

    .panel_search_result {
        margin-top: 60px;
        background: rgba(255, 255, 255, 0.7);
        /*border: 1px skyblue solid;*/
        width: 100%;
        border-radius: 5px;
        max-height: 80vh;
        overflow: auto;
    }
</style>
